<template>
  <CollapseContainer title="账号信息" :canExpan="false" :loading="loading">
    <a-descriptions bordered :column=2 >
      <a-descriptions-item label="公司名称"><span class="content-fontSize">{{businessInfo.name}}</span></a-descriptions-item>
      <a-descriptions-item label="打款户名">
        <span class="content-fontSize">{{businessInfo.payName}}
          <a @click="handleCopy(businessInfo.payName)"><CopyOutlined class="mr-2" /></a>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="公司账户"><span class="content-fontSize">{{businessInfo.bankAccount}}</span></a-descriptions-item>
      <a-descriptions-item label="打款账户">
        <span class="content-fontSize">{{businessInfo.payAccount}}
          <a @click="handleCopy(businessInfo.payAccount)"><CopyOutlined class="mr-2" /></a>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="账户开户名"><span class="content-fontSize">{{businessInfo.accountName}}</span></a-descriptions-item>
      <a-descriptions-item label="打款开户行">
        <span class="content-fontSize">{{businessInfo.payBankName}}
          <a @click="handleCopy(businessInfo.payBankName)"><CopyOutlined class="mr-2" /></a>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="账户开户行" :span="2"><span class="content-fontSize">{{businessInfo.bankName}}</span></a-descriptions-item>
      <a-descriptions-item label="服务费率"><span style="font-size: 38px;font-weight: bold;color: red;">{{parseFloat(businessInfo.taxRate*100).toFixed(2)}}%</span>
      </a-descriptions-item>
      <a-descriptions-item label="公司余额"><span style="font-size: 32px;font-weight: bold;">￥{{parseFloat(businessInfo.balance).toFixed(2)}}</span></a-descriptions-item>
      <a-descriptions-item label="合同文件" :span="2">
        <span class="content-fontSize">{{businessInfo.contractFile}}</span>
        <a-button style="margin-left: 30px;" :ghost="true" type="primary" preIcon="ant-design:search-outlined" size="small" @click="viewFile(businessInfo.contractFile)">预览</a-button>
        <a-divider type="vertical" style="margin-left: 10px;"/>
        <a-button style="margin-left: 10px;" :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(businessInfo.contractFile)">下载</a-button>
      </a-descriptions-item>
    </a-descriptions>
  </CollapseContainer>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { CopyOutlined } from "@ant-design/icons-vue";
import { CollapseContainer } from "/@/components/Container/index";
import { queryBusinessAccount } from "/@/api/sys/business.api";
import { handleCopy } from '/@/utils/common/compUtils';
import { downloadFile, viewFile } from "/@/utils/common/renderUtils";

export default defineComponent({
  components: {
    CollapseContainer,
    CopyOutlined,
  },
  setup() {
    const loading = ref(true);
    const businessInfo = ref<any>({
      taxRate: 0.00,
      balance: 0.00,
    });

    onMounted(async () => {
      await queryBusinessAccount({}).then((res) => {
        businessInfo.value = res.result;
        if(res.result && res.result.contractFile){
          let arr = res.result.contractFile.split('/');
          businessInfo.value.contractFile = arr[arr.length-1];
        }
        // console.log("[账户信息]商户信息：",businessInfo.value)
      }).finally(() => {
        loading.value = false;
      });
    });

    return {
      loading,
      businessInfo,
      handleCopy,
      downloadFile,
      viewFile
    };
  }
});
</script>

<style lang="less" scoped>
.change-avatar {
  img {
    display: block;
    margin-bottom: 15px;
    border-radius: 50%;
  }
}
.content-fontSize {
  font-size: 26px;
}
</style>
